<!DOCTYPE html public>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/static/css/view.css" type="text/css"/>
<link rel="stylesheet" href="/static/highlight/styles/sunburst.css">
<link rel="stylesheet" href="/static/css/font.css" type="text/css"/>
<link rel="stylesheet" href="/static/css/button.css" type="text/css"/>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="/static/highlight/highlight.pack.js"></script>
<script>
hljs.tabReplace = '    '
;hljs.initHighlightingOnLoad();
</script>

<script type="text/javascript">
  	
	$(document).ready(function() {
		
		$("#btnnew").click(function(){
			$( "#dialog" ).dialog({modal:true, position:'center', minHeight: 400, minWidth: 610,resizable:false});
			$(".ui-dialog-titlebar").hide();
			$("#tit").val('');
			$("#codes").val('');
		});
		
		$('pre').each(function(){
			 $(this).hide()
		})
    	$('.title').click(function(){
			if ($(this).next().is(':visible')) {
			    $(this).next().slideUp();
			 	$(this).css('color', '#888');
			} else {
			    $('pre').each(function(){ $(this).slideUp();})
			    $(this).next().slideDown();
				$('.title').each(function (){$(this).css('color', '#888');})
				$(this).css('color', '#000');
				
			}
		})
		
		$('.title').hover(
		function(){
		    if (!$('code').is(':visible'))
		    {
		        $(this).css('color', '#000');
	        }
		}, 
		function(){
		    if (!$('code').is(':visible'))
		    {
		        $(this).css('color', '#888');
	        }
		});
		
		$('#btnpost').click(function(){
			t = $('#tit').val();
			c = $('#codes').val();
			var obj = {title:t, code:c, author: '{{ username }}' }
			postJSON("/newpost", obj,null)
			$("#dialog").dialog('close')
		})
		$('#btnclose').click(function(){
			$("#dialog").dialog('close')
		})
  		$('.indexh1').click(function(){
			window.location.href = "/"
		})
	});
	function getCookie(name) {
	    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
	    return r ? r[1] : undefined;
	}
	function postJSON(url, args, callback) {
	    args._xsrf = getCookie("_xsrf");
	    $.ajax({url: url, data: $.param(args), dataType: "text", type: "POST",
	        success: function(response) {
	        window.location.href = "/view/{{ username }}"
	    }});
	};

</script>
<title>/* Code Bag */</title>
</head>
<body style="font-size:130%;">
<table style="padding:0px; margin: 0px 0px 10px 0px; width:950px" cellpadding="0" cellspacing="0">
<tbody><tr style="height: 58px;">
	<td><div class="indexh1"><span style="color:grey">/*</span> Code Bag <span style="color:green">@</span> {{ username }} <span style="color:grey">*/</span></div></td>
	<td><span> <a class="button blue medium" id="btnnew">New Snippet</a></span></td>
</tr>
</tbody>
</table>

<div id="dialog" style="display:none">
	<input id="tit" class="inout" name="inout" type="text" value="">
	<textarea id="codes"></textarea>
	<a id="btnclose" class="button blue small" style="color:#D9EEF7">Cancel</a>
	<a id="btnpost" class="button blue small" style="color:#D9EEF7"> &nbsp;Post&nbsp; </a>
</div>
<br/>

{% for snippet in snippets %}
<div id = "codeblock">
<div id = "title" class="title">{{ snippet['title'] }}</div>
<pre>
<code>{{ escape(snippet['code']) }}</code>
</pre>
</div>
{% end %}

</body>
</html>